<template>
  <div class="list-table">
    <div v-if="showTitle" class="area-header">
      <span class="area-header-title">{{ $t('项目计划') }}</span>
    </div>
    <el-form ref="queryForm" :model="queryParams" :inline="true">
      <el-form-item v-if="$route.query.id === undefined || $route.query.id === null || $route.query.id === ''" :label="$t('关联项目')" prop="dealId">
        <el-select v-model="queryParams.dealId" clearable filterable :placeholder="$t('关联项目')">
          <el-option
            v-for="dict in dealListOption"
            :key="dict.id"
            :label="$t(dict.dealName)"
            :value="dict.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('事项负责人')" prop="personChargeName">
        <UserSelect
          v-model="queryParams.personChargeName"
          :placeholder="$t('事项负责人')"
          clearable
          @keyup.enter.native="queryHandle"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="queryHandle">{{ $t('搜索') }}</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t('重置') }}</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          v-hasPermi="['deal:supervise:edit']"
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="addHandle"
        >{{ $t('新增') }}
        </el-button>
      </el-col>
      <el-col v-if="$route.query.id !== undefined" :span="1.5">
        <el-button
          v-hasPermi="['deal:supervise:edit']"
          type="warning"
          icon="el-icon-pie-chart"
          size="mini"
          @click="openGanttEcharts($route.query.id)"
        >{{ $t('甘特图') }}
        </el-button>
      </el-col>
      <el-col v-if="$route.query.id" :span="1.5">
        <el-button
          v-hasPermi="['deal:supervise:import']"
          type="info"
          icon="el-icon-upload2"
          size="mini"
          @click="handleImport"
        >{{ $t('导入') }}
        </el-button>
      </el-col>
      <el-col v-if="$route.query.id" :span="1.5">
        <el-button
          v-hasPermi="['deal:supervise:export']"
          type="warning"
          icon="el-icon-download"
          size="mini"
          @click="exportHandle"
        >{{ $t('导出') }}
        </el-button>
      </el-col>
    </el-row>

    <!-- 项目外显示 -->
    <el-table
      v-if="$route.query.id === undefined"
      v-loading="loading"
      :data="dealSuperviseList"
      style="width: 100%"
      :stripe="true"
      tooltip-effect="light"
      :border="true"
      :row-key="getRowKeys"
      :expand-row-keys="expands"
    >
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-table :data="props.row.subData" border :default-expand-all="true" row-key="id" tooltip-effect="darkTable" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">>
            <el-table-column :label="$t('事项名称')" align="center" prop="itemName" min-width="220" style="text-align: left;">
              <template slot="header" slot-scope="{}">
                <i style="color: #ff4949;margin-right: 4px;">*</i>
                <span>{{ $t('事项名称') }}</span>
              </template>
              <template slot-scope="scope">
                <el-input
                  v-if="scope.row.itemNameFlag"
                  v-model="scope.row.itemName"
                  v-focus
                  style="width: 200px !important;"
                  @focus="focusEvent(scope.row,scope.$index,scope.column)"
                  @blur="blurEvent(scope.row,scope.$index,scope.column)"
                />
                <span v-else style="cursor: pointer;min-width: 100px;width: 100px;" @click="cellClick(scope.row, props.$index, scope.$index, scope.column)">
                  {{ isBlank(scope.row.itemName) }}
                </span>
              </template>
            </el-table-column>
            <el-table-column :label="$t('事项负责人')" align="center" prop="personCharge" show-overflow-tooltip min-width="100">
              <template slot="header" slot-scope="{}">
                <i style="color: #ff4949;margin-right: 4px;">*</i>
                <span>{{ $t('事项负责人') }}</span>
              </template>
              <template slot-scope="scope">
                <UserSelect
                  v-if="scope.row.personChargeFlag"
                  v-model="scope.row.personCharge"
                  v-focus
                  popper-append-to-body
                  style="position: absolute;bottom: 10px;width: 87%;"
                  :multiple="true"
                  :collapse-tags="true"
                  :placeholder="$t('项目负责人')"
                  @change="changeUser(scope.row,scope.$index,scope.column, $event)"
                />
                <p v-else style="cursor: pointer;min-width: 100px;width: 100px;text-align: center;margin: auto;" @click="cellClick(scope.row, props.$index, scope.$index, scope.column)">
                  {{ isBlank(scope.row.personChargeName) }}
                </p>
              </template>
            </el-table-column>
            <el-table-column :label="$t('跳转阶段')" align="center" prop="verificationPhase" min-width="100">
              <template slot="header" slot-scope="{}">
                <span>{{ $t('跳转阶段') }}</span>
              </template>
              <template slot-scope="scope">
                <el-select
                  v-if="scope.row.verificationPhaseFlag"
                  v-model="scope.row.verificationPhase"
                  :placeholder="$t('跳转阶段')"
                  @focus="focusEvent(scope.row,scope.$index,scope.column)"
                >
                  <el-option
                    v-for="node in wordFlowNodeList[props.row.dealId]"
                    :key="node.nodeId"
                    :label="$t(node.wfConfigNode.nodeName)"
                    :value="node.nodeId"
                    @click.native="blurEvent(scope.row,scope.$index,scope.column)"
                  />
                </el-select>
                <p v-else style="cursor: pointer;min-width: 100px;width: 100px;text-align: center;margin: auto;" @click="cellClick(scope.row, props.$index, scope.$index, scope.column)">
                  {{ formatVerificationPhase(wordFlowNodeList[props.row.dealId], scope.row.verificationPhase) }}
                </p>
              </template>
            </el-table-column>
            <el-table-column :label="$t('是否完成')" align="center" prop="complete" :formatter="completeFormat" min-width="80">
              <template slot="header" slot-scope="{}">
                <i style="color: #ff4949;margin-right: 4px;">*</i>
                <span>{{ $t('是否完成') }}</span>
              </template>
              <template slot-scope="scope">
                <el-select
                  v-if="scope.row.completeFlag"
                  v-model="scope.row.complete"
                  v-focus
                  :placeholder="$t('是否完成')"
                  @focus="focusEvent(scope.row, scope.$index, scope.column)"
                >
                  <el-option
                    v-for="dict in completeOptions"
                    :key="dict.dictValue"
                    :label="$t(dict.dictLabel)"
                    :value="dict.dictValue"
                    @click.native="blurEvent(scope.row,scope.$index,scope.column)"
                  />
                </el-select>
                <p v-else style="cursor: pointer;min-width: 100px;width: 100px;text-align: center;margin: auto;" @click="cellClick(scope.row, props.$index, scope.$index, scope.column)">
                  {{ scope.row.complete === 'Y' ? $t('是') : (scope.row.complete === 'N' ? $t('否') : '--') }}
                </p>
              </template>
            </el-table-column>
            <el-table-column :label="$t('预计开始时间')" align="center" prop="estimatedStartTime" min-width="160">
              <template slot="header" slot-scope="{}">
                <i style="color: #ff4949;margin-right: 4px;">*</i>
                <span>{{ $t('预计开始时间') }}</span>
              </template>
              <template slot-scope="scope">
                <el-date-picker
                  v-if="scope.row.estimatedStartTimeFlag"
                  v-model="scope.row.estimatedStartTime"
                  v-focus
                  clearable
                  style="width: 145px"
                  type="date"
                  value-format="yyyy-MM-dd"
                  :placeholder="$t('预计开始时间')"
                  @focus="focusEvent(scope.row,scope.$index,scope.column)"
                  @blur="blurEvent(scope.row,scope.$index,scope.column)"
                />
                <p v-else style="cursor: pointer;min-width: 100px;width: 100px;text-align: center;margin: auto;" @click="cellClick(scope.row, props.$index, scope.$index, scope.column)">
                  {{ formatTime(parseTime(scope.row.estimatedStartTime)) }}
                </p>
              </template>
            </el-table-column>
            <el-table-column :label="$t('预计完成时间')" align="center" prop="completionTime" min-width="160">
              <template slot="header" slot-scope="{}">
                <i style="color: #ff4949;margin-right: 4px;">*</i>
                <span>{{ $t('预计完成时间') }}</span>
              </template>
              <template slot-scope="scope">
                <el-date-picker
                  v-if="scope.row.completionTimeFlag"
                  v-model="scope.row.completionTime"
                  v-focus
                  clearable
                  style="width: 145px"
                  type="date"
                  value-format="yyyy-MM-dd"
                  :placeholder="$t('预计完成时间')"
                  @focus="focusEvent(scope.row,scope.$index,scope.column)"
                  @blur="blurEvent(scope.row,scope.$index,scope.column)"
                />
                <p v-else style="cursor: pointer;min-width: 100px;width: 100px;text-align: center;margin: auto;" @click="cellClick(scope.row, props.$index, scope.$index, scope.column)">
                  {{ formatTime(parseTime(scope.row.completionTime)) }}
                </p>
              </template>
            </el-table-column>
            <el-table-column :label="$t('实际完成时间')" align="center" prop="actualTime" min-width="160">
              <template slot="header" slot-scope="{}">
                <i style="color: #ff4949;margin-right: 4px;">*</i>
                <span>{{ $t('实际完成时间') }}</span>
              </template>
              <template slot-scope="scope">
                <el-date-picker
                  v-if="scope.row.actualTimeFlag"
                  v-model="scope.row.actualTime"
                  v-focus
                  clearable
                  style="width: 145px"
                  type="date"
                  value-format="yyyy-MM-dd"
                  :placeholder="$t('实际完成时间')"
                  @focus="focusEvent(scope.row,scope.$index,scope.column)"
                  @blur="blurEvent(scope.row,scope.$index,scope.column)"
                />
                <p v-else style="cursor: pointer;min-width: 100px;width: 100px;text-align: center;margin: auto;" @click="cellClick(scope.row, props.$index, scope.$index, scope.column)">
                  {{ formatTime(parseTime(scope.row.actualTime)) }}
                </p>
              </template>
            </el-table-column>
            <el-table-column fix="right" align="center" class-name="small-padding fixed-width" width="130">
              <template slot="header" slot-scope="{}">
                <span>{{ $t('操作') }}</span>
                <el-tooltip :content="$t('添加一级事项')" placement="top">
                  <i class="el-icon-circle-plus-outline" style="width: 20px;cursor: pointer;color: #1890ff;" @click="addOneHandler(props.row.dealId)" />
                </el-tooltip>
              </template>
              <template slot-scope="scope">
                <el-tooltip :content="$t('添加下级')" placement="top">
                  <el-button
                    v-if="scope.row.parentId === '0' && !scope.row.id.includes('uuid')"
                    v-hasPermi="['deal:supervise:edit']"
                    size="small"
                    type="text"
                    icon="el-icon-circle-plus-outline"
                    @click="addTwoHandler(props.row.dealId, scope.row)"
                  />
                </el-tooltip>
                <el-button
                  v-if="!scope.row.id.includes('uuid')"
                  v-hasPermi="['deal:supervise:edit']"
                  size="small"
                  type="text"
                  icon="el-icon-edit"
                  @click="updateHandle(scope.row)"
                />
                <el-button
                  v-hasPermi="['deal:supervise:remove']"
                  size="small"
                  type="text"
                  icon="el-icon-delete"
                  @click="deleteHandle(scope.row)"
                />
              </template>
            </el-table-column>
          </el-table>
          <div class="messageTip">* {{ $t('点击表格可进行快速编辑') }}</div>
        </template>
      </el-table-column>
      <el-table-column label="项目名称" prop="dealName">
        <template slot-scope="scope">
          <router-link
            target="_blank"
            :to="{ path:'/deal/home/dealBaseHome',query:{ id: scope.row.dealId, companyId: scope.row.companyId }}"
            class="link_a"
          >{{ scope.row.dealName }}</router-link>
        </template>
      </el-table-column>
      <el-table-column :label="$t('项目负责人')" prop="dealPrincipal" />
      <el-table-column :label="$t('项目阶段')" prop="dealStage" />
      <el-table-column :label="$t('开始时间')" prop="earliestTime">
        <template slot-scope="props">
          <span>{{ parseTime(props.row.earliestTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('结束时间')" prop="latestTime">
        <template slot-scope="props">
          <span>{{ parseTime(props.row.latestTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('操作')" fix="right" align="center" class-name="small-padding fixed-width" width="130">
        <template slot-scope="props">
          <el-button type="text" @click="openGanttEcharts(props.row.dealId)">{{ $t('甘特图') }}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 项目内 -->
    <el-table v-else v-loading="loading" :data="inDealSuperviseList" border default-expand-all row-key="id" tooltip-effect="darkTable" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
      <el-table-column :label="$t('事项名称')" align="left" prop="itemName" :show-overflow-tooltip="true" min-width="250">
        <template slot-scope="scope">
          <el-link class="link-a" type="primary" @click="updateHandle(scope.row)">{{ scope.row.itemName }}</el-link>
        </template>
      </el-table-column>
      <el-table-column :label="$t('事项负责人')" align="center" prop="personChargeName" show-overflow-tooltip min-width="150" />
      <el-table-column :label="$t('跳转阶段')" align="center" prop="verificationPhaseName" min-width="100" />
      <el-table-column :label="$t('是否完成')" align="center" prop="complete" :formatter="completeFormat" min-width="100" />
      <el-table-column :label="$t('预计开始时间')" align="center" prop="estimatedStartTime" min-width="120">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.estimatedStartTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('预计完成时间')" align="center" prop="completionTime" min-width="120">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.completionTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('完成进度')" align="center" prop="completeSchedule" min-width="120">
        <template slot-scope="scope">
          <span v-if="scope.row.completeSchedule">{{ moneyFormat(scope.row.completeSchedule, 'rate') }}%</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('实际完成时间')" align="center" prop="actualTime" min-width="120">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.actualTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('操作')" fix="right" align="center" class-name="small-padding fixed-width" min-width="200">
        <template slot-scope="scope">
          <el-button
            v-hasPermi="['deal:supervise:edit']"
            size="small"
            type="text"
            icon="el-icon-edit"
            @click="updateHandle(scope.row)"
          >{{ $t('修改') }}</el-button>
          <el-button
            v-hasPermi="['deal:supervise:remove']"
            size="small"
            type="text"
            icon="el-icon-delete"
            @click="deleteHandle(scope.row)"
          >{{ $t('删除') }}</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-if="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <!--    <div v-if="total <= 0 && !loading" style="width: 100%;height: 60px;border: 1px solid #e6ebf5;border-top: 0;font-size: 14px;">-->
    <!--      <div class="el-table__empty-block" style="height: 100%; width: 1314px;"><span class="el-table__empty-text">{{ $t('暂无数据') }}</span></div>-->
    <!--    </div>-->

    <!-- 添加或修改项目-督办事项对话框 -->
    <el-dialog :title="$t(title)" :visible.sync="formOpen" :close-on-click-modal="false" :lock-scroll="false" custom-class="dialogForm" append-to-body>
      <dealSuperviseForm ref="dealSuperviseForm" />
    </el-dialog>

    <el-dialog :title="$t('甘特图')" :visible.sync="ganttHomeOpen" :close-on-click-modal="false" :lock-scroll="false" custom-class="dialogForm" append-to-body>
      <ganttHome ref="ganttHome" />
    </el-dialog>

    <!-- 导入 -->
    <el-dialog
      :title="$t('项目计划导入')"
      :visible.sync="upload.open"
      width="400px"
      :close-on-click-modal="false"
      :lock-scroll="false"
    >
      <el-upload
        ref="upload"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="upload.url + '?updateSupport=' + upload.updateSupport+ '&dealId=' + upload.dealId"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload" />
        <div class="el-upload__text">
          {{ $t('将文件拖到此处，或') }}
          <em>{{ $t('上传') }}</em>
        </div>
        <!--        <div slot="tip" class="el-upload__tip">-->
        <!--          <el-checkbox v-model="upload.updateSupport" /> {{ $t('是否更新已经存在的数据') }}-->
        <!--        </div>-->
        <div slot="tip" class="el-upload__tip" style="color:red">
          {{ $t('提示：仅允许导入“xls”或“xlsx”格式文件！') }}
          <el-link type="primary" style="font-size:12px" @click="fetchTemplate">
            {{ $t('下载模板') }}
          </el-link>
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button @click="upload.open = false">{{ $t("取消") }}</el-button>
        <el-button type="primary" @click="submitFileForm">{{ $t("确定") }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listDealSupervise, delDealSupervise, saveDealSupervise, findListTreeInDeal } from '@/api/deal/supervise/dealSupervise'
import dealSuperviseForm from './dealSuperviseForm.vue'
import ganttHome from '@/views/deal/supervise/dhtmlxGantt/Home.vue'
import { findDeal } from '@/api/base/deal/dealBase'
import { getParentNode } from '@/api/act/busFlow/wfBusNode'
import { mapState } from 'vuex'
import { getToken } from '@/utils/auth'
export default {
  components: {
    dealSuperviseForm,
    ganttHome
  },
  // 自定义指令
  directives: {
    focus: {
      inserted: function(el) {
        el.querySelector('input').focus()
      }
    }
  },
  props: {
    showTitle: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 项目-督办事项表格数据
      dealSuperviseList: [],
      // 项目内
      inDealSuperviseList: [],
      // 弹出层标题
      title: '项目-项目计划',
      // 是否显示弹出层
      formOpen: false,
      ganttHomeOpen: false,
      // 校验阶段字典
      verificationPhaseOptions: [],
      // 是否完成字典
      completeOptions: [],
      // 查询参数
      queryParams: {
        itemName: undefined,
        dealId: this.$route.query.id,
        personChargeName: undefined,
        dealStage: undefined,
        verificationPhase: undefined,
        complete: undefined,
        pageNum: 1,
        pageSize: 10
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      dealListOption: [],
      // 展开行
      expands: [],
      // 节点下拉
      wordFlowNodeList: {},
      wordFlowNodeTempId: [],
      // 用户导入参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: '',
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // dealId
        dealId: this.$route.query.id,
        // 设置上传的请求头部
        headers: { Authorization: 'Bearer ' + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + '/supervise/dealSupervise/importData'
      }
    }
  },
  computed: {
    ...mapState({
      userList: (state) => state.user.userList
    })
  },
  created() {
    this.getList()
    // this.getDicts('sys_yes_no').then(response => {
    //   this.verificationPhaseOptions = response.data
    // })
    this.getDicts('sys_yes_no').then(response => {
      this.completeOptions = response.data
    })
    if (!this.$route.query.id) {
      findDeal().then(response => {
        this.dealListOption = response.data
      })
    }
  },
  methods: {
    /** 查询项目-督办事项列表 */
    getList() {
      this.loading = true
      if (this.$route.query.id === undefined) {
        listDealSupervise(this.queryParams).then(response => {
          this.dealSuperviseList = response.rows
          if (this.dealSuperviseList !== null && this.dealSuperviseList.length > 0) {
            this.inDealSuperviseList = this.dealSuperviseList[0].subData
          }
          this.total = response.total
          this.loading = false
        })
      } else {
        findListTreeInDeal(this.queryParams).then(response => {
          this.inDealSuperviseList = response.rows
          this.total = response.total
          this.loading = false
        })
      }
    },
    getWorkFlowNode(dealId) {
      getParentNode('deal', dealId).then(response => {
        this.wordFlowNodeList[dealId] = response.data
      })
    },
    // 是否完成字典翻译
    completeFormat(row) {
      return this.selectDictLabel(this.completeOptions, row.complete)
    },
    formatTime(val) {
      if (val === undefined || val === '' || val === null) {
        return '--'
      } else {
        return val
      }
    },
    formatVerificationPhase(options, nodeId) {
      if (options) {
        const object = options.find(obj => obj.nodeId === nodeId)
        if (object) {
          return object.wfConfigNode.nodeName
        } else {
          return '--'
        }
      }
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        dealId: undefined,
        itemName: undefined,
        personCharge: [],
        verificationPhase: undefined,
        verificationPhaseName: undefined,
        complete: '0',
        completionTime: undefined,
        actualTime: undefined,
        remark: undefined,
        actId: undefined,
        actStatus: '0',
        actTitle: undefined,
        createBy: undefined,
        createTime: undefined,
        updateBy: undefined,
        updateTime: undefined,
        delFlag: undefined,
        subData: {}
      }
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    queryHandle() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.queryHandle()
    },
    /** 新增按钮操作 */
    addHandle() {
      this.formOpen = true
      this.$nextTick(() => {
        this.$refs.dealSuperviseForm.init(null)
      })
    },
    /** 修改按钮操作 */
    updateHandle(row) {
      this.formOpen = true
      this.$nextTick(() => {
        // 调用form页面的 init 方法初始化数据
        this.$refs.dealSuperviseForm.init(row)
      })
    },
    /**
     * 导入
     */
    handleImport() {
      this.upload.title = this.$t('导入')
      this.upload.open = true
    },
    // 文件上传中处理
    handleFileUploadProgress() {
      this.upload.isUploading = true
    },
    // 文件上传成功处理
    handleFileSuccess(response) {
      this.upload.open = false
      this.upload.isUploading = false
      this.$refs.upload.clearFiles()
      this.$alert(response.msg, this.$t('导入结果'), { dangerouslyUseHTMLString: true })
      this.getList()
    },
    // 下载模板
    fetchTemplate() {
      const href1 = window.location.href
      const href2 = this.$route.path
      const url = href1.substring(0, href1.indexOf(href2))
      window.location.href = url + '/template/projectPlanImportTemplate.xlsx'
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit()
    },
    /** 导出按钮操作 */
    exportHandle() {
      this.downLoadExcel('/supervise/dealSupervise/export', this.queryParams)
    },
    openGanttEcharts(dealIds) {
      const dealId = this.isNotEmpty(dealIds) ? dealIds : this.$route.query.id
      this.ganttHomeOpen = true
      this.$nextTick(() => {
        this.$refs.ganttHome.init(dealId)
      })
    },
    isNotEmpty(val) {
      return val !== undefined && val !== null && val !== ''
    },
    /** 删除按钮操作 */
    deleteHandle(row) {
      if (row.id.includes('uuid')) {
        this.getList()
        this.msgSuccess(this.$t('删除成功'))
      } else {
        var that = this
        var msg = ''
        if (row.children !== undefined && row.children !== null && row.children.length > 0) {
          msg = this.$t('将会删除该事项及其子事项') + ', '
        }
        this.$confirm(msg + this.$t('是否确认删除?'), this.$t('警告'), {
          confirmButtonText: this.$t('确定'),
          cancelButtonText: this.$t('取消'),
          type: 'warning'
        }).then(function() {
          that.loading = true
          return delDealSupervise(row.id)
        }).then(() => {
          this.getList()
          this.msgSuccess(this.$t('删除成功'))
        }).catch(function() {
        })
      }
    },
    isBlank(val) {
      if (val === undefined || val === null || val === '') {
        return '--'
      } else {
        return val
      }
    },
    // key
    getRowKeys(row) {
      if (!this.wordFlowNodeTempId.includes(row.dealId)) {
        this.wordFlowNodeTempId.push(row.dealId)
        this.getWorkFlowNode(row.dealId)
      }
      return row.dealId
    },
    // 点击某个td后让其他失去焦点, 主要针对select等无法失去焦点的情况
    resetOtherBlur(row, column) {
      console.log('点击某个td后让其他失去焦点', row, column)
      if (column.property !== 'personCharge') {
        this.$set(row, 'personChargeFlag', false)
      }
      if (column.property !== 'complete') {
        this.$set(row, 'completeFlag', false)
      }
      if (column.property !== 'verificationPhase') {
        this.$set(row, 'verificationPhaseFlag', false)
      }
    },
    // 点击文本触发，显示input框，隐藏p标签
    cellClick(row, mainIndex, subIndex, column) {
      console.log('编辑', row, mainIndex, subIndex, column)
      this.resetOtherBlur(row, column)
      this.$forceUpdate()
      if (column.label === '事项名称') {
        this.$nextTick(() => {
          // this.$set(row, column.property + 'Flag', !row[column.property + 'Flag'])
          this.$set(row, 'itemNameFlag', !row.itemNameFlag)
        })
      } else if (column.label === '事项负责人') {
        this.$nextTick(() => {
          this.$set(row, 'personChargeFlag', !row.personChargeFlag)
        })
      } else if (column.label === '是否完成') {
        this.$nextTick(() => {
          this.$set(row, 'completeFlag', !row.completeFlag)
        })
      } else if (column.label === '预计开始时间') {
        this.$nextTick(() => {
          this.$set(row, 'estimatedStartTimeFlag', !row.estimatedStartTimeFlag)
        })
      } else if (column.label === '预计完成时间') {
        this.$nextTick(() => {
          this.$set(row, 'completionTimeFlag', !row.completionTimeFlag)
        })
      } else if (column.label === '实际完成时间') {
        this.$nextTick(() => {
          this.$set(row, 'actualTimeFlag', !row.actualTimeFlag)
        })
      } else if (column.label === '跳转阶段') {
        this.$nextTick(() => {
          this.$set(row, 'verificationPhaseFlag', !row.verificationPhaseFlag)
        })
      }
      this.$forceUpdate()
    },
    changeUser(row, index, column, userArr) {
      console.log(userArr)
      if (row.personChargeFlag && (!userArr.includes(row.personCharge))) {
        this.$set(row, 'personCharge', userArr)
        if (this.userList.length > 0) {
          var user = []
          userArr.forEach(userId => {
            const temp = this.userList.find(user => user.id === userId)
            if (temp) {
              user.push(temp.label)
            }
          })
          if (user) {
            this.$set(row, 'personChargeName', user.join(','))
          }
        }
        // this.blurEvent(row, index, column)
      }
    },
    // 点击输入框聚焦，存储当前值
    focusEvent(row, index, column) {
      console.log('获取焦点记录旧值', row, index, column)
      if (column.label === '事项名称') {
        row.oldItemName = row.itemName
      } else if (column.label === '事项负责人') {
        row.oldPersonCharge = row.personCharge
      } else if (column.label === '是否完成') {
        row.oldComplete = row.complete
      } else if (column.label === '预计开始时间') {
        row.oldEstimatedStartTime = row.estimatedStartTime
      } else if (column.label === '预计完成时间') {
        row.oldCompletionTime = row.completionTime
      } else if (column.label === '实际完成时间') {
        row.oldActualTime = row.actualTime
      } else if (column.label === '跳转阶段') {
        row.oldVerificationPhase = row.verificationPhase
      }
    },
    // 输入框失去焦点触发,此处用提示框提示修改
    blurEvent(row, curIndex, column) {
      console.log('失去焦点: ', row, curIndex, column)
      var saveFlag = false
      if (column.label === '事项名称') {
        this.$set(row, 'itemNameFlag', !row.itemNameFlag)
        if (row.itemName !== row.oldItemName) {
          saveFlag = true
        }
      } else if (column.label === '事项负责人') {
        this.$set(row, 'personChargeFlag', !row.personChargeFlag)
        if (row.oldPersonCharge !== row.personCharge) {
          saveFlag = true
        }
      } else if (column.label === '是否完成') {
        this.$set(row, 'completeFlag', !row.completeFlag)
        if (row.oldComplete !== row.complete) {
          saveFlag = true
        }
      } else if (column.label === '预计开始时间') {
        this.$set(row, 'estimatedStartTimeFlag', !row.estimatedStartTimeFlag)
        if (row.oldEstimatedStartTime !== row.estimatedStartTime) {
          saveFlag = true
        }
      } else if (column.label === '预计完成时间') {
        this.$set(row, 'completionTimeFlag', !row.completionTimeFlag)
        if (row.oldCompletionTime !== row.completionTime) {
          saveFlag = true
        }
      } else if (column.label === '实际完成时间') {
        this.$set(row, 'actualTimeFlag', !row.actualTimeFlag)
        if (row.oldActualTime !== row.actualTime) {
          saveFlag = true
        }
      } else if (column.label === '跳转阶段') {
        this.$set(row, 'verificationPhaseFlag', !row.verificationPhaseFlag)
        if (row.oldVerificationPhase !== row.verificationPhase) {
          saveFlag = true
        }
      }
      if (saveFlag) {
        var saveFlagTemp = true
        // 判断是否填写完毕, 保存
        if (this.isEmpty(row.itemName) === '') {
          saveFlagTemp = false
        } else if (this.isEmpty(row.personCharge) === '') {
          saveFlagTemp = false
        } else if (this.isEmpty(row.complete) === '') {
          saveFlagTemp = false
        } else if (this.isEmpty(row.estimatedStartTime) === '') {
          saveFlagTemp = false
        } else if (this.isEmpty(row.completionTime) === '') {
          saveFlagTemp = false
        } else if (row.complete === 'Y' && this.isEmpty(row.actualTime) === '') {
          this.msgError(this.$t('请填写实际完成时间'))
          saveFlagTemp = false
        }
        // 必填校验
        saveFlagTemp = (saveFlagTemp && this.checkTimeSJWC(row) && this.checkTimeYJWC(row) && this.checkTimeYJKS(row))
        if (saveFlagTemp) {
          if (row.id.includes('uuid')) {
            row.id = undefined
          }
          saveDealSupervise(row).then(response => {
            if (response.code === 200) {
              row.id = response.data.id
              this.msgSuccess(this.$t('保存成功'))
            } else {
              this.msgError(response.msg)
              this.loading = false
            }
          })
        }
      }
    },
    checkTimeYJKS(row) {
      if (row.estimatedStartTime !== undefined && row.estimatedStartTime !== null && row.completionTime !== undefined && row.completionTime !== null) {
        if (new Date(row.estimatedStartTime).getTime() > new Date(row.completionTime).getTime()) {
          this.msgError(this.$t('不能晚于预计完成时间'))
          row.estimatedStartTime = ''
          return false
        } else {
          return true
        }
      } else {
        return true
      }
    },
    checkTimeYJWC(row) {
      if (row.estimatedStartTime !== undefined && row.estimatedStartTime !== null && row.completionTime !== undefined && row.completionTime !== null) {
        if (new Date(row.estimatedStartTime).getTime() > new Date(row.completionTime).getTime()) {
          this.msgError(this.$t('不能晚于预计完成时间'))
          row.completionTime = ''
          return false
        } else {
          return true
        }
      } else {
        return true
      }
    },
    checkTimeSJWC(row) {
      if (row.estimatedStartTime !== undefined && row.estimatedStartTime !== null && row.actualTime !== undefined && row.actualTime !== null) {
        if (new Date(row.estimatedStartTime).getTime() > new Date(row.actualTime).getTime()) {
          this.msgError(this.$t('不能早于预计开始时间'))
          row.actualTime = ''
          return false
        } else {
          return true
        }
      } else {
        return true
      }
    },
    isEmpty(val) {
      if (val === undefined || val === null || val === '') {
        return ''
      } else {
        return val
      }
    },
    // 添加一级
    addOneHandler(dealId) {
      var object = this.dealSuperviseList.find(obj => obj.dealId === dealId)
      if (!object) {
        this.msgError(this.$t('发生异常!'))
      } else {
        const row = {
          id: 'uuid' + new Date().getTime(),
          dealId: dealId,
          parentId: '0',
          itemName: '',
          personCharge: [this.$store.state.user.userId],
          personChargeName: this.$store.state.user.nickName,
          verificationPhase: undefined,
          complete: undefined,
          estimatedStartTime: '',
          completionTime: '',
          actualTime: '',
          delFlag: '0'
        }
        if (!(object.subData instanceof Array)) {
          this.$set(object, 'subData', [])
        }
        this.$nextTick(() => {
          object.subData.push(row)
          this.$forceUpdate()
        })
      }
    },
    addTwoHandler(dealId, parentRow) {
      console.log(dealId, parentRow)
      const row = {
        id: 'uuid' + new Date().getTime(),
        dealId: dealId,
        parentId: parentRow.id,
        itemName: '',
        personCharge: this.$store.state.user.userId,
        personChargeName: this.$store.state.user.nickName,
        verificationPhase: undefined,
        complete: undefined,
        estimatedStartTime: '',
        completionTime: '',
        actualTime: '',
        delFlag: '0'
      }
      if (!(parentRow.children instanceof Array)) {
        this.$set(parentRow, 'children', [])
      }
      this.$nextTick(() => {
        parentRow.children.push(row)
        this.$forceUpdate()
      })
    }
  }
}
</script>
<style lang="scss" scoped>
 div .el-select-dropdown el-popper {
  position: fixed
}

 .messageTip {
   height: 15px;
   margin-bottom: 20px;
   text-align: right;
   margin-right: 20px;
   line-height: 3;
   font-size: 10px;
 }
</style>
